<template>
  <div class="zhuiman" @click="gotoCartoon(id,num)">
        <div class="item">
            <div class="item-img">
                <img :src="data.vertical_cover" alt="" />
            </div>
            <div class="item-title auto-text">{{data.title}}</div>
            <div class="item-number">看到{{num+1}}话/共{{data.total}}话</div>
        </div>
  </div>
</template>

<script>
export default {
    props:['id','lishi'],
    data(){
        return{
            data:[],
            num:'',
        }
    },
    created(){
        this.num = 0
        for(let i = 0 ; i < this.lishi.length ; i++){
            if(this.id == this.lishi[i].id){
                this.num = this.lishi[i].zhangId;
            }
        }
        this.axios({
            methods:'GET',
            url:'ComicDetail',
            params:{
                comicId:this.id
            }
        }).then(result=>{
            this.data = result.data.data;
        })
    },
    methods:{
        gotoCartoon(id,num){
            this.$router.push({name:"chapter",query:{id,Zid:num}})
        }
    }
};
</script>

<style lang="less" scoped>
        .item{
            .item-img{
                width: 100%;
                height: 150px;
                border-radius: 5px;
                overflow: hidden;
                > img {
                    height: 100%;
                    display: block;
                }
            }
            .item-title{
                width: 100%;
                padding-top: 5px;
            }
            .item-number{
                color: #9c9ba1
            }
        }
        .item:nth-child(3n){
            margin-right: 0px;
        }
</style>